function populateSelect(el, items) {
    el.options.length = 0;
    if (items.length > 0)
        el.options[0] = new Option('please select', '');

    $.each(items, function () {
        el.options[el.options.length] = new Option(this.name, this.value);
    });
}


function ClearDropdown(dropDown) {
    $(dropDown)[0].options.length = 0;
}

function BindSecondary(dd1, dd2, arr) {

    //clear the options before rebinding them
    ClearDd2(dd2);

    //get the selected value from dropdown 1
    var sel = $(dd1).val();

    //use the JQuery grep function to find all objects in my JSON collection
    //where the PrimaryColor equals the selection from the first dropdown.
    //this is really the key to making this work elegantly
    
    var arr = $.grep(arrSecondary, function(a) { return a.PrimaryColor == sel; });

    //for each JSON object, write an option to the second dropdown
    $(arr[sel]).each(
                function(i) {
                    $("<option>").attr("value", arr[i])
                                      .text(arr[i]).appendTo(dd2);
                });
}

function SelectAnnotators(dd1, dd2, hid, txt) {

    //the selected value from the second dropdown
    var selVal = $(dd2).val();

    //make sure a color has been selected
    if (selVal == '') {
        alert('You must select ');
        return false;
    }

    //grab the text from the selected option
    var selText = $(dd2 + ' :selected').text();

    //store the ID, or option value, in a hidden form field
    $(hid).val(selVal);

    //send the selected color into a text field
    $(txt).val(selText);
}

